import './index.css';
import {Button, Form, Input, Selector, Slider, Stepper, Switch, TextArea,Toast} from 'antd-mobile';
import React from 'react';
import {useState} from 'react';
import { publishPetInfo } from '../../api/pet';
import { useNavigate } from 'react-router-dom';
import ImageUpload from '../../components/ImageUpload';
import MyTabBar from '../../components/MyTabBar';

export default function Publish() {
    const [petInfo, setpetInfo] = useState();
    // 文件上传
    const [file, setFile] = useState();
    const navigate = useNavigate()
    const marks = {
        0: 0,
        10: 1,
        20: 2,
        30: 3,
        40: 4,
        50: 5,
        60: 6,
        70: 7,
        80: 8,
        90: 9,
        100: 10
    };
    //处理发布数据
    const dealData = (value)=>{
        const data = {}
        const {name,type,character,age} = value
        if(file){
            var pet_avatar = file[0].url;
        }
        data.name = name;
        data.pet_avatar = pet_avatar
        data.pet_type = type[0];
        data.character = character[0];
        data.pet_age = age;
        data.pet_gender = 0;
        data.title = petInfo;
        //调用发布领养接口
        const flag = publishPetInfo(data)
        flag.then((res)=>{
            if(res.status === 0){
                Toast.show({
                    icon:'success',
                    content:'发布成功'
                })
                navigate('/home')
            }else{
                console.log('发布失败')
            }
        })
        
    }
    return (
        <div className="publish-container">
            <div className="pet-info">
                <TextArea
                    autoSize={{minRows: 3, maxRows: 5}}
                    placeholder="介绍一下您的宠物，宠物喜好，性格情况、健康。"
                    name='petinfo'
                    value = {petInfo}
                    onChange={val => {
                        setpetInfo(val);
                        // console.log(val)
                    }}
                />
                <ImageUpload
                    file={file}
                    maxCount={1}
                    setFile={setFile}
                    uploadSuccess={imageList => {
                        console.log('uploadSuccess', imageList);
                    }}
                />
            </div>

            <div className="pub-info">
                <div className="info-header">基本信息</div>
                <Form
                    layout="horizontal"
                    onFinish={dealData}
                    footer={
                        <Button block type="submit" color="primary" size="large" >
                            立即发布
                        </Button>
                    }
                >
                    <Form.Item name="name" label="宠物名称" rules={[{required: true, message: '宠物名称不能为空'}]}>
                        <Input onChange={console.log} placeholder="请输入姓名" />
                    </Form.Item>

                    <Form.Item name="type" label="类型">
                        <Selector
                            columns={2}
                            options={[
                                {label: '狗', value: 1},
                                {label: '猫', value: 0}
                            ]}
                        />
                    </Form.Item>

                    <Form.Item name="character" label="性格">
                        <Selector
                            columns={3}
                            options={[
                                {label: '乖巧', value: 1},
                                {label: '一般', value: 2},
                                {label: '刚烈', value: 3}
                            ]}
                        />
                    </Form.Item>

                    <Form.Item name="age" label="年龄">
                        <Slider ticks marks={marks} step={1} />
                    </Form.Item>

                    <Form.Item name="weight" label="体重" childElementPosition="right">
                        <Stepper />
                    </Form.Item>

                    <Form.Item name="sterilization" label="是否绝育" childElementPosition="right">
                        <Switch />
                    </Form.Item>

                    <Form.Item name="expelInsects" label="是否驱虫" childElementPosition="right">
                        <Switch />
                    </Form.Item>

                    <Form.Item name="delivery" label="是否接种疫苗" childElementPosition="right">
                        <Switch />
                    </Form.Item>
                </Form>
            </div>
            <MyTabBar />
        </div>
    );
}